<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>(B-JUI) - Bootstrap for BJUI富客户端框架 - API</title>
<meta name="Keywords" content="Bootstrap,BJUI,jquery,ui,api,前端,框架,开源,OSC,开源框架,knaan"/>
<meta name="Description" content="Bootstrap for BJUI富客户端框架，基于BJUI富客户端框架修改。主要针对皮肤，编辑器，表单验证等方面进行了大量修改，引入了Bootstrap，Font Awesome，KindEditor，jquery.validationEngine，iCheck等众多开源项目。提供最新在线api文档，交流QQ群：232781006。"/> 
<!-- bootstrap - css -->
<link href="../../BJUI/themes/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/docs.min.css" rel="stylesheet">
<link href="../assets/patch.css" rel="stylesheet">
<!-- uploadify -->
<link href="../../BJUI/plugins/uploadify/css/uploadify.css" rel="stylesheet">
<!-- core - css -->
<!--
<link href="../../BJUI/themes/css/style.css" rel="stylesheet">
<link href="../../BJUI/themes/purple/core.css" rel="stylesheet">
-->

<!-- plug - css -->
<link href="../../BJUI/plugins/kindeditor_4.1.10/themes/default/default.css" rel="stylesheet">
<link href="../../BJUI/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="../../BJUI/plugins/bootstrapSelect/bootstrap-select.css" rel="stylesheet">
<link href="../../BJUI/themes/css/FA/css/font-awesome.min.css" rel="stylesheet">
<!-- jquery -->
<script src="../../BJUI/js/jquery-1.7.2.min.js"></script>
<!-- BJUI.min 分模块压缩版 -->
<!--  
<script src="../../BJUI/js/dwz.min.js"></script>
-->
<!-- 以下是BJUI的分模块未压缩版，建议开发调试阶段使用下面的版本 -->
<!--  
<script src="../../BJUI/js/dwz.core.js"></script>
<script src="../../BJUI/js/dwz.util.date.js"></script>
<script src="../../BJUI/js/dwz.drag.js"></script>
<script src="../../BJUI/js/dwz.barDrag.js"></script>
<script src="../../BJUI/js/dwz.ui.js"></script>
<script src="../../BJUI/js/dwz.theme.js"></script>
<script src="../../BJUI/js/dwz.alertMsg.js"></script>
<script src="../../BJUI/js/dwz.contextmenu.js"></script>
<script src="../../BJUI/js/dwz.navTab.js"></script>
<script src="../../BJUI/js/dwz.tab.js"></script>
<script src="../../BJUI/js/dwz.resize.js"></script>
<script src="../../BJUI/js/dwz.dialog.js"></script>
<script src="../../BJUI/js/dwz.dialogDrag.js"></script>
<script src="../../BJUI/js/dwz.stable.js"></script>
<script src="../../BJUI/js/dwz.taskBar.js"></script>
<script src="../../BJUI/js/dwz.ajax.js"></script>
<script src="../../BJUI/js/dwz.pagination.js"></script>
<script src="../../BJUI/js/dwz.database.js"></script>
<script src="../../BJUI/js/dwz.datepicker.js"></script>
<script src="../../BJUI/js/dwz.effects.js"></script>
<script src="../../BJUI/js/dwz.history.js"></script>
-->
<!-- plugins -->
<!-- swfupload -->
<script src="../../BJUI/plugins/swfupload/swfupload.min.js"></script>
<!-- uploadify -->
<!--  
<script src="../../BJUI/plugins/uploadify/scripts/jquery.uploadify.min.js"></script>
-->
<!-- kindeditor -->
<script src="../../BJUI/plugins/kindeditor_4.1.10/kindeditor-all.min.js"></script>
<script src="../../BJUI/plugins/kindeditor_4.1.10/lang/zh_CN.js"></script>
<!-- colorpicker -->
<script src="../../BJUI/plugins/colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- ztree -->
<script src="../../BJUI/plugins/ztree/jquery.ztree.core-3.5.min.js"></script>
<script src="../../BJUI/plugins/ztree/jquery.ztree.excheck-3.5.min.js"></script>
<script src="../../BJUI/plugins/ztree/jquery.ztree.exedit-3.5.min.js"></script>
<script src="../../BJUI/plugins/ztree/jquery.ztree.exhide-3.5.min.js"></script>
<!-- form validate -->

<!-- bootstrap plugins -->
<script src="../../BJUI/plugins/bootstrap.min.js"></script>
<script src="../../BJUI/plugins/bootstrapSelect/bootstrap-select.min.js"></script>
<script src="../../BJUI/plugins/bootstrapTags/bootstrap-tags.min.js"></script>
<!-- icheck -->
<script src="../../BJUI/plugins/icheck/icheck.min.js"></script>
<!-- dragsort -->
<script src="../../BJUI/plugins/dragsort/jquery.dragsort-0.5.1.min.js"></script>
<!-- other plugins -->
<script src="../../BJUI/plugins/other/jquery.autosize.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../assets/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/ie10-viewport-bug-workaround.js"></script>
<!-- highlight -->
<script src="http://cdn.bootcss.com/highlight.js/8.2/highlight.min.js"></script>

<script type="text/javascript" src="http://static.oschina.net/js/syntax-highlighter-2.1.382/scripts/brush.js"></script>
<link type="text/css" rel="stylesheet" href="http://static.oschina.net/js/syntax-highlighter-2.1.382/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://static.oschina.net/js/syntax-highlighter-2.1.382/styles/shThemeDefault.css"/>

<!-- init -->
<script type="text/javascript">
$(function(){
    
})
$(document).ready(function(){
    SyntaxHighlighter.config.clipboardSwf = 'http://static.oschina.net/js/syntax-highlighter-2.1.382/scripts/clipboard.swf';
    SyntaxHighlighter.all();
});
</script>
</head>
<body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                </button>
                <a href="../" class="navbar-brand">B-JUI</a>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="doc">框架组件</a></li>
                    <li><a href="plugins">jQuery 插件</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://www.xknaan.com">官网DEMO</a></li>
                    <li><a href="http://www.bootcss.com">Bootstrap中文网</a></li>
                    <li><a href="http://www.j-ui.com">DWZ(j-ui)官网</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
        <div class="container">
            <h1>框架结构 & CSS样式</h1>
            <p>B-JUI框架结构详解；全局CSS样式</p>
        </div>
    </div>
    
    <div class="container bs-docs-container">
      <div class="row">
            <div class="col-md-9" role="main">
                <div class="bs-docs-section">
                    <h1 id="overview" class="page-header">概览</h1>
                    <p class="lead">B-JUI仅有一个主页面(document)，框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上，外部页面则通过iframe嵌入主页面， 本节介绍 B-JUI的主页面结构。</p>
                    <h3 id="overview-doctype">HTML5 文档类型</h3>
                    <p>同Bootstrap， B-JUI使用 HTML5 文档类型，参照下面的格式进行设置。</p>
                    <pre class="brush: html">
                        &lt;!DOCTYPE html>
                        &lt;html lang="zh-CN">
                          ...
                        &lt;/html>
                    </pre>
                    <h3 id="overview-main">主页面结构(仅body部分)</h3>
                    <p>主页面由上（页头）、中左（导航菜单）、中右（工作区）、下（页脚）四部分组成，其中左侧导航菜单可收缩。结构如下：</p>
                    <pre class="brush: html">
                        <header class="bjui-header" id="bjui-header">
                            <!-- 页头 -->
                        </header>
                        <div class="bjui-leftside" id="bjui-leftside">
                            <!-- 导航菜单 -->
                        </div>
                        <div id="bjui-container">
                            <!-- 工作区 -->
                        </div>
                        <footer class="bjui-footer" id="bjui-footer">
                            <!-- 页脚 -->
                        </footer>
                    </pre>
                    <h3 id="overview-child">子页面（即页面片段[后面简称：页片]）结构</h3>
                    <p>页片通常由两部分组成，也可以只保留bjui-pageContent部分，其中bjui-pageContent部分可选bjui-headBar（顶部工具条）和bjui-footBar（底部工具条）。结构如下：</p>
                    <pre class="brush: html">
                        <div class="bjui-pageHeader">
                            <!-- 顶部模块[如：功能按钮、搜索面板] -->
                        </div>
                        <div class="bjui-pageContent">
                            <div class="bjui-headBar">
                                <!-- 顶部工具条 -->
                            </div>
                            <div data-layout-h="0">
                                <!-- 内容区 -->
                            </div>
                            <div class="bjui-footBar">
                                <!-- 底部工具条  -->
                            </div>
                        </div>
                    </pre>
                    <ul>
                        <li><code>data-layout-h</code> 属性表示该容器为页片自适应布局，当值为<code>0</code>时，B-JUI会为该容器的高度自动赋值为：本页片总高度减去本页片中的固定元素(bjui-pageHeader\bjui-headBar\bjui-footBar)高度。</li>
                        <li><code>data-layout-h</code> 属性值<code>不等于0</code>时，该容器高度为本页片总高度减去属性值。</li>
                        <li>需要自定义固定元素(块级元素有效)，请为该元素添加属性<code>data-layout-fixed="true"</code></li>
                    </ul>
                    <p>完整的页片详见B-JUI源代码的<code>table.html</code>，仅bjui-pageContent部分的页片详见<code>form.html</code></p>
                    <h3 id="overview-navtab">标签式工作区(navtab)</h3>
                    <p>B-JUI框架的整个工作区部分就是一个navtab组件，本组件位于主页面的"<code>#bjui-container</code>"容器内，固定的html结构如下：</p>
                    <pre class="brush: html">
                        <div id="bjui-navtab" class="tabsPage">
                            <div class="tabsPageHeader">
                                <div class="tabsPageHeaderContent">
                                    <ul class="navtab-tab nav nav-tabs">
                                        <li data-tabid="main" class="main active"><a href="javascript:;"><span>我的主页</span></a></li>
                                    </ul>
                                </div>
                                <div class="tabsLeft"><i class="fa fa-angle-double-left"></i></div>
                                <div class="tabsRight"><i class="fa fa-angle-double-right"></i></div>
                                <div class="tabsMore"><i class="fa fa-angle-double-down"></i></div>
                            </div>
                            <ul class="tabsMoreList">
                                <li><a href="javascript:;">我的主页</a></li>
                            </ul>
                            <div class="navtab-panel tabsPageContent layoutBox">
                                各页片内容区域
                            </div>
                        </div>
                    </pre>
                    <p><strong>用法</strong>(如何创建一个navtab)：</p>
                    <ul>
                        <li>DOM点击触发：
                            <pre class="brush: html">
                                <a href="mytab.html" data-toggle="navtab" data-id="mynavtab" data-title="我的业务页面">打开navtab</a>
                            </pre>
                            <pre class="brush: html">
                                <button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-url="mytab.html" data-title="我的业务页面">打开navtab</button>
                            </pre>
                        </li>
                        <li>jQuery：
                            <pre class="brush: js">
                                $(selector).navtab({id:'标签的id', url:'载入页片的url', title:'标签的标题'})
                            </pre>
                        </li>
                    </ul>
                    <p><strong>参数：</strong></p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>默认值</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>id</td>
                                    <td>string</td>
                                    <td>navtab</td>
                                    <td>标签的ID，如果指定重复，将覆盖现有的ID相同标签。</td>
                                </tr>
                                <tr>
                                    <td>title</td>
                                    <td>string</td>
                                    <td>New tab</td>
                                    <td>标签打开后显示的名称。</td>
                                </tr>
                                <tr>
                                    <td>url</td>
                                    <td>string</td>
                                    <td>undefined</td>
                                    <td>请求数据的url。</td>
                                </tr>
                                <tr>
                                    <td>type</td>
                                    <td>string</td>
                                    <td>GET</td>
                                    <td>Http请求方式，可选‘GET/POST’。</td>
                                </tr>
                                <tr>
                                    <td>data</td>
                                    <td>object</td>
                                    <td>{}</td>
                                    <td>请求url时，需要发送的data数据。</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p><strong>方法：</strong></p>
                    <p>这样调用navtab的方法：
                        <pre class="brush: js">
                            $(selector).navtab('方法名', 参数1, ..., 参数n)
                        </pre>
                        如要切换到某个标签：
                        <pre class="brush: js">
                            $(selector).navtab('switchTab', 标签ID)
                        </pre>
                        方括号的参数，表示该参数可选。
                    </p>
                    <p>可用的方法：</p>
                    <ul>
                        <li><code>switchTab(tabid)</code>：切换到某个标签。</li>
                        <li><code>refresh(tabid)</code>：刷新某个标签。</li>
                        <li><code>reload(options)</code>：重新载入某个标签，options同navtab默认参数，如果未指定ID，则默认重载入当前标签。</li>
                        <li><code>closeTab(tabid)</code>：关闭某个标签。</li>
                        <li><code>closeCurrentTab([tabid])</code>：关闭当前标签。</li>
                        <li><code>closeAllTab()</code>：关闭所有标签。</li>
                    </ul>
                    <p><strong>事件：</strong></p>
                    <p>这样监听navtab的事件：
                        <pre class="brush: js">
                            $(document).on('bjui.beforeLoadNavtab', function(e) {
                                var $navtab = $(e.target)
                                // do something...
                            })
                        </pre>
                    </p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>bjui.beforeLoadNavtab</td>
                                    <td>载入标签内容前的事件</td>
                                </tr>
                                <tr>
                                    <td>bjui.beforeCloseNavtab</td>
                                    <td>关闭标签前的事件</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h3 id="overview-dialog">弹出窗口(dialog)</h3>
                    <p>弹出窗口分为普通弹出窗口和模态弹出窗口，普通弹出窗口可通过taskBar组件进行最小化等操作。弹出窗口的DOM结构会放入Body中，结构如下：</p>
                    <pre class="brush: html">
                        <div class="bjui-dialog bjui-dialog-container">
                            <div class="dialogHeader">
                                <!-- 最大化、最小化、关闭等按钮区 -->
                                <h1><!-- 标题 --></h1>
                            </div>
                            <div class="dialogContent layoutBox unitBox">
                                <!-- 页片内容区 -->
                            </div>
                            <!-- 用于调整大小的div片断 -->
                        </div>
                    </pre>
                    <p><strong>用法</strong>(如何创建一个dialog)：</p>
                    <ul>
                        <li>DOM点击触发：
                            <pre class="brush: html">
                                <a href="mydialog.html" data-toggle="dialog" data-id="mydialog" data-title="我的弹出窗口">打开弹出窗口</a>
                            </pre>
                            <pre class="brush: html">
                                <button type="button" class="btn-green" data-toggle="dialog" data-id="mynavtab" data-url="mytab.html" data-title="我的弹出窗口">打开弹出窗口</button>
                            </pre>
                        </li>
                        <li>jQuery：
                            <pre class="brush: js">
                                $(selector).dialog({id:'弹窗的id', url:'载入页片的url', title:'弹窗的标题'})
                            </pre>
                        </li>
                    </ul>
                    <p><strong>参数：</strong></p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>默认值</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>id</td>
                                    <td>string</td>
                                    <td>navtab</td>
                                    <td>弹窗的ID，如果指定重复，将覆盖现有的ID相同弹窗。</td>
                                </tr>
                                <tr>
                                    <td>title</td>
                                    <td>string</td>
                                    <td>New tab</td>
                                    <td>弹窗打开后显示的名称。</td>
                                </tr>
                                <tr>
                                    <td>url</td>
                                    <td>string</td>
                                    <td>undefined</td>
                                    <td>请求数据的url。</td>
                                </tr>
                                <tr>
                                    <td>type</td>
                                    <td>string</td>
                                    <td>GET</td>
                                    <td>Http请求方式，可选‘GET/POST’。</td>
                                </tr>
                                <tr>
                                    <td>data</td>
                                    <td>object</td>
                                    <td>{}</td>
                                    <td>请求url时，需要发送的data数据。</td>
                                </tr>
                                <tr>
                                    <td>width</td>
                                    <td>int</td>
                                    <td>500</td>
                                    <td>弹窗的宽度。</td>
                                </tr>
                                <tr>
                                    <td>height</td>
                                    <td>int</td>
                                    <td>300</td>
                                    <td>弹窗的高度。</td>
                                </tr>
                                <tr>
                                    <td>max</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>打开弹窗时直接最大化。</td>
                                </tr>
                                <tr>
                                    <td>mask</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>是否模态窗口。</td>
                                </tr>
                                <tr>
                                    <td>resizable</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>可以调整弹窗的大小。</td>
                                </tr>
                                <tr>
                                    <td>drawable</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>可以拖动弹窗。</td>
                                </tr>
                                <tr>
                                    <td>maxable</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>是否显示最大化按钮。</td>
                                </tr>
                                <tr>
                                    <td>minable</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>是否显示最小化按钮（模态弹窗无效）。</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p><strong>方法：</strong></p>
                    <p>调用方式同navtab：
                        如要关闭某个弹窗：
                        <pre class="brush: js">
                            $(selector).dialog('close', 弹窗ID)
                        </pre>
                        方括号的参数，表示该参数可选。
                    </p>
                    <p>可用的方法：</p>
                    <ul>
                        <li><code>switchDialog(id)</code>：切换到某个弹窗(模态弹窗无效)。</li>
                        <li><code>refresh(id)</code>：刷新某个弹窗。</li>
                        <li><code>reload(options)</code>：重新载入某个弹窗，options同dialog默认参数，如果未指定ID，则默认重载入当前弹窗。</li>
                        <li><code>close(id)</code>：关闭某个弹窗。</li>
                        <li><code>closeCurrent()</code>：关闭当前弹窗。</li>
                    </ul>
                    <p><strong>事件：</strong></p>
                    <p>这样监听dialog的事件：
                        <pre class="brush: js">
                            $(document).on('bjui.beforeLoadDialog', function(e) {
                                var $dialog = $(e.target)
                                // do something...
                            })
                        </pre>
                    </p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>bjui.beforeLoadDialog</td>
                                    <td>载入弹窗内容前的事件</td>
                                </tr>
                                <tr>
                                    <td>bjui.beforeCloseDialog</td>
                                    <td>关闭弹窗前的事件</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h1 id="ajax" class="page-header">Ajax</h1>
                    <p>本节主要介绍B-JUI框架中的Ajax操作，回调函数等。</p>
                    <p><strong>Ajax操作：</strong></p>
                    <ul>
                        <li>ajax搜索 - 主要用于搜索表单，分页表单，例：B-JUI源码"<code>table.html</code>"中的#pagerForm：
                            <pre class="brush: html">
                                &lt;form id="pagerForm" data-toggle="ajaxsearch" action="table.html" method="post">
                            </pre>
                        </li>
                        <li>ajax重置搜索 - 主要用于重置搜索表单，<code>data-clear-query</code>属性告诉form是否清空查询参数，仅保留分页及字段排序信息，例：B-JUI源码"<code>table.html</code>"中的清空查询按钮：
                            <pre class="brush: html">
                                <a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查询</a>
                            </pre>
                        </li>
                        <li>ajax载入 - 主要用于为指定容器载入url的内容，<code>data-target</code>属性值为选择器表达式，告诉ajax载入的内容放到该容器，适合用来做局部刷新：
                            <pre class="brush: html">
                                <a href="table-edit.html" data-toggle="ajaxload" data-target="#D11">加载内容</a>
                            </pre>
                        </li>
                        <li>ajax动作 - 主要用于执行ajax命令，如“删除”，<code>data-confirm-msg</code>属性用于在操作前进行确认提示：
                            <pre class="brush: html">
                                <a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="确定要删除该行信息吗？">删除数据</a>
                            </pre>
                        </li>
                        <li>ajax导出 - 主要用于导出信息(下载文件)，<code>data-confirm-msg</code>属性用于在操作前进行确认提示：
                            <pre class="brush: html">
                                <a href="book1.xlsx" data-toggle="doexport" data-confirm-msg="确定要导出信息吗？">导出全部</a>
                            </pre>
                        </li>
                        <li>ajax导出选中项 - 主要用于导出选中项信息(下载文件)，<code>data-confirm-msg</code>属性用于在操作前进行确认提示，<code>data-idname</code>属性指定发送到后台的字段名称，默认“ids”，<code>data-group</code>属性用于指定复选框的name：
                            <pre class="brush: html">
                                <a href="book1.xlsx" data-toggle="doexportchecked" data-confirm-msg="确定要导出选中项吗？" data-idname="expids" data-group="ids">导出选中项</a>
                            </pre>
                        </li>
                        <li>ajax删除选中项 - 主要用于导出选中项信息(下载文件)，<code>data-confirm-msg</code>属性用于在操作前进行确认提示，<code>data-idname</code>属性指定发送到后台的字段名称，默认“ids”，<code>data-group</code>属性用于指定复选框的name：
                            <pre class="brush: html">
                                <a href="del.html" data-toggle="dodelchecked" data-confirm-msg="确定要删除选中项吗？" data-idname="delids" data-group="ids">导出选中项</a>
                            </pre>
                        </li>
                    </ul>
                    <p><strong>Ajax回调：</strong></p>
                </div>
                <div class="bs-docs-section">
                    <h1 id="tables" class="page-header">表格</h1>
                    <p>表格的Class同Bootstrap，仅调整了padding值，使表格显示得更紧凑。</p>
                    <ul>
                        <li><code>.table</code> 少量的padding和水平分隔线。</li>
                        <li><code>.table-striped</code> 条纹状表格 <code>[IE8 不支持]</code>。</li>
                        <li><code>.table-bordered</code> 带边框表格。</li>
                        <li><code>.table-hover</code> 附加鼠标悬停效果。</li>
                    </ul>
                    <p>表格表头字段排序按钮实现：</p>
                    <pre class="brush: html">
                        &lt;th data-order-field="sex">姓名&lt;/th>
                        &lt;th data-order-direction="asc" data-order-field="createtime">创建时间&lt;/th>
                    </pre>
                    <p>
                        <code>data-order-field=""</code>属性令本字段可排序，属性值为与后台交互的字段名称。<br>
                        <code>data-order-direction</code>属性表示本字段的当前排序状态，可选值(<code>asc/desc</code>)
                    </p>
                    <h2 id="tables-normal">普通表格</h2>
                    <p>普通的表格，可显示列表状条目，或布局表单，表头字段可附加排序按钮。</p>
                    <p>完整的实例详见B-JUI源代码的<code>table.html</code>。</p>
                    <h2 id="tables-fixed">固定表头表格</h2>
                    <p>表格的头可固定住，可调整各列的宽度，表头字段可附加排序按钮。</p>
                    <pre class="brush: html">
                        &lt;table data-toggle="tablefixed" data-width="100%" data-layout-h="0">
                    </pre>
                    <p>表格添加属性<code>data-toggle="tablefixed"</code>后就会固定表头，B-JUI默认为固定的表头的表格添加Class：<code>table table-striped table-bordered table-hover</code>，如果该table设置有Class，则以设置的为准</p>
                    <p>完整的实例详见B-JUI源代码的<code>table-fixed.html</code>。</p>
                    <h2 id="tables-edit">可编辑表格</h2>
                    <p>用于需要动态添加简单行内容的地方。</p>
                    <pre class="brush: html">
                        &lt;table class="table table-bordered table-hover table-striped" data-toggle="tabledit" data-initnum="0" data-layout-h="0">
                            &lt;thead>
                                &lt;tr>
                                    &lt;th title="No.">&lt;input type="text" name="edit[#index#].id" class="no" data-rule="required" value="1" size="2">&lt;/th>
                                    &lt;th title="姓名">&lt;input type="text" name="edit[#index#].name" data-rule="required" value="" size="5">&lt;/th>
                                    &lt;th title="" data-addtool="true" width="100">
                                        &lt;a href="javascript:;" class="btn btn-red row-del" data-confirm-msg="确定要删除该行信息吗？">删&lt;/a>
                                   &lt;/th>
                                &lt;/tr>
                            &lt;/thead>
                        &lt;/table>
                    </pre>
                    <p>实现步骤：</p>
                    <ol>
                        <li>表格添加属性<code>data-toggle="tablefixed"</code>；</li>
                        <li>thead中添加上对应的表单信息，字段名放到title属性上；</li>
                        <li>若想在某列上显示添加按钮，需在对应列上添加属性<code>data-addtool="true"</code>；</li>
                        <li>若每行显示删除按钮，需为删除按钮添加Class<code>row-del</code>，如果要确认才能删除，需为删除按钮添加属性<code>data-confirm-msg="删除提示信息"</code>。</li>
                    </ol>
                    <p>表格的<code>data-initnum</code>属性，表示载入本页片时，初始化的添加行数，值为0时不需写。</p>
                    <p>外部触发添加行事件：</p>
                    <ul>
                        <li>按钮式：
                            <pre class="brush: html">
                                <button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tabledit1" data-num="1">添加编辑行</button>
                            </pre>
                            <code>data-target</code>属性设置编辑表格的jQuery选择器，<code>data-num</code>属性设置点击时添加的行数。
                        </li>
                        <li>jQuery：<code>$(selector).tabledit('add', 编辑表格的jQuery对象, 待添加的行数)</code>
                            <pre class="brush: js">
                                $(selector).tabledit('add', $('#tabledit1'), 2)
                            </pre>
                        </li>
                    </ul>
                    <p>完整的实例详见B-JUI源代码的<code>table-edit.html</code>。</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
                    <ul class="nav bs-docs-sidenav">
                        <li>
                            <a href="#overview">概览</a>
                            <ul class="nav">
                                <li><a href="#overview-doctype">HTML5 文档类型</a></li>
                                <li><a href="#overview-main">主页面结构(仅body部分)</a></li>
                                <li><a href="#overview-child">子页面结构</a></li>
                                <li><a href="#overview-navtab">标签式工作区(navtab)</a></li>
                                <li><a href="#overview-dialog">弹出窗口(dialog)</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#ajax">Ajax</a>
                            <ul class="nav">
                                <li><a href="#ajax-action">Ajax动作</a></li>
                                <li><a href="#ajax-callback">Ajax回调</a></li>
                                <li><a href="#ajax-search">Ajax搜索</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#tables">表格</a>
                            <ul class="nav">
                                <li><a href="#tables-normal">普通表格</a></li>
                                <li><a href="#tables-fixed">固定表头表格</a></li>
                                <li><a href="#tables-edit">可编辑表格</a></li>
                            </ul>
                        </li>
                        <li><a href="#forms">表单</a>
                            <ul class="nav">
                                <li><a href="#forms-input">文本框</a></li>
                                <li><a href="#forms-select">下拉选择框</a></li>
                                <li><a href="#forms-checkbox">单选、复选框</a></li>
                                <li><a href="#forms-spinner">微调控件</a></li>
                                <li><a href="#forms-upload">上传组件</a></li>
                            </ul>
                        </li>
                        <li><a href="#buttons">按钮</a>
                            <ul class="nav">
                                <li><a href="#buttons-options">预定义样式</a></li>
                                <li><a href="#buttons-sizes">尺寸</a></li>
                                <li><a href="#buttons-active">激活状态</a></li>
                                <li><a href="#buttons-disabled">禁用状态</a></li>
                                <li><a href="#buttons-tags">按钮类</a></li>
                            </ul>
                        </li>
                    </ul>
                    <a class="back-to-top" href="#top">返回顶部</a>
                    <a href="#" class="bs-docs-theme-toggle">主题预览</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer ================================================== -->
    <footer class="bs-docs-footer" role="contentinfo">
        <div class="container">
            <ul class="bs-docs-footer-links muted">
                <li>当前版本： v1.0 Beta</li>
                <li>&middot;</li>
                <li><a href="https://github.com/twbs/bootstrap">OSCHINA GIT</a></li>
                <li>&middot;</li>
                <li><a href="../getting-started/#examples">在线DEMO</a></li>
                <li>&middot;</li>
                <li><a href="../about/">关于</a></li>
                <li>&middot;</li>
                <li><a href="https://github.com/twbs/bootstrap/releases">历史版本</a></li>
            </ul>
        </div>
    </footer>
</body>
</html>